<template>
  <view class="root">
    <view @tap="onTapHeart" class="root" v-if="!isPosting"></view>
    <view class="posting" v-else></view>
  </view>
</template>

<script>
import {ref} from "vue";

export default {
  name: "HeartBeat",
  setup() {
    const isPosting = ref(false)

    const onTapHeart = () => {
      isPosting.value = true
    }

    return {
      isPosting,
      onTapHeart
    }
  }
}
</script>

<style lang="scss" scoped>
@-webkit-keyframes heartbeat {
  0% {
    opacity: 1;
    transform: scale(.8,.8);
  }
  25% {
    opacity: .8;
    transform: scale(1,1);
  }
  100% {
    opacity: 1;
    transform: scale(.8,.8);
  }
}

@keyframes heartbeat {
  0% {
    opacity: 1;
    transform: scale(.8,.8);
  }
  25% {
    opacity: .8;
    transform: scale(1,1);
  }
  100% {
    opacity: 1;
    transform: scale(.8,.8);
  }
}

.root {
  background-image: url('https://coder-love.oss-cn-shanghai.aliyuncs.com/heart.png');
}

.root, .posting {
  animation: heartbeat 2s linear infinite;
  background-size: 100% 100%;
  filter: drop-shadow(0rpx 0rpx 20rpx rgb(255,20,20));
  height: 100%;
  width: 100%;
}

.posting {
  background-image: url("https://coder-love.oss-cn-shanghai.aliyuncs.com/posting.gif");
}
</style>
